import React from 'react'
import style from './style'
import cx from 'classnames'
import util from '../../util'
import IconFont from '../iconFont'

class SelectList extends React.Component {

  static propsType = {}
	static defaultProps = {
		item: ({ avatarUrl, fullName, jobTitle }, attrs={}) => (
			<li className={style.item} {...attrs} onMouseDown={util.preventDefaultEvent/*组织默认事件，使焦点留在父元素的input中*/}>
        {
          // 判断是否不显示头像
          avatarUrl === "noAvatarUrl" ? null :
            avatarUrl?
            <img 
              src={avatarUrl}
            />: <IconFont value="avatar"/>
          
        }
				<span>{ fullName }</span>
				<span>{ jobTitle }</span>
			</li>
		)
	}

  state = {
    selected: 0
  }

  bound = false

  handleClick = (i) => {
    return () => {
      this.setState({
        selected: i
      })
      this.props.handleSelect(i)
      this.unbind()
    }
  }

  handleKeyDown = (e) => {
    const { which } = e
    let { selected } = this.state
    if (which === 40 || which === 38) {
      e.preventDefault()

      // up
      if (which === 38) {
        selected = selected === 0? 0: selected-1
      }
      // down
      if (which === 40) {
        selected = selected === this.props.data.length-1? selected: selected+1
      }

      this.setState({
        selected
      })
    }

    // enter
    if (which === 13) {
      e.preventDefault()

      this.props.handleSelect(selected)
      this.unbind()
    }

		//console.log(`which: ${which}`)
  }

  renderItem = (v, i) => {
    return this.props.item(v, {
      onClick: this.handleClick(i),
      key: i,
      className: cx({
        [style.active]: this.state.selected === i
      })
    })
  }

  reset() {
    this.setState({
      selected: 0
    })
  }

  componentWillReceiveProps({ show, query }) {
    if (query !== this.props.query) {
      this.reset()
    }
    if (show !== this.props.show) {
      // reset
      if (show) {
        this.reset()
      }
    }
    if (show && !this.bound) {
      this.bind()
    } 
    if (!show && this.bound) {
      this.unbind()
    }
  }

  bind() {
    this.bound = true
    util.bind(document, 'keydown', this.handleKeyDown)
  }

  unbind() {
    this.bound = false
    util.unbind(document, 'keydown', this.handleKeyDown)
  }

  componentWillUnmount() {
    this.unbind()
  }

  render() {
    const { className, data=[], show, pos } = this.props
		if (!data.length || !show) return null;
    //当上下移动是 改变焦点
    if(this.refs.selectUl){
      const {
        selectUl
      } = this.refs;
      const selectItem = this.refs.selectUl.children[this.state.selected];
      const {
        offsetHeight: selectUlHeight,
      } = selectUl;
      const {
        offsetTop,
        offsetHeight,
      } = selectItem;
      selectUl.scrollTop = offsetTop - (selectUlHeight - offsetHeight) / 2;
    }
    return (
      <ul
        ref={'selectUl'}
        style={{...pos}} 
        className={cx({
          [style.root]: true,
          [className]: className
        })}
      >
        { data.map(this.renderItem) }
      </ul>
    )
  }
}

export default SelectList
